<div class="modal-header">
  <button type="button" class="close" (click)="cancel()">&times;</button>
  <h4 class="modal-title">{{title}}黑名单</h4>
</div>
<div class="modal-body">
  <div class="form-container container-12" [formGroup]="modelForm">
    <div class="form-item">
      <span class="title">姓名：</span>
      <input type="text" formControlName="name" placeholder="姓名" />
      <span class="unit text-danger" *ngIf="modelForm.controls.name.errors && modelForm.controls.name.dirty && modelForm.controls.name.errors.required">*</span>
    </div>
    <div class="form-item">
      <span class="title">手机号：</span>
      <input type="text" formControlName="mobile" placeholder="手机号" />
      <span class="unit text-danger" *ngIf="modelForm.controls.mobile.errors && modelForm.controls.mobile.dirty && modelForm.controls.mobile.errors.required">*</span>
    </div>
    <div class="form-item">
      <span class="title">身份证：</span>
      <input type="text" formControlName="cardId" placeholder="身份证" />
    </div>
    <div class="form-item">
      <div class="reason">
        <span class="title">原因：</span>
      </div>
      <textarea type="text" formControlName="remark" placeholder="请输入原因"></textarea>
      <span class="unit text-danger" *ngIf="modelForm.controls.remark.errors && modelForm.controls.remark.dirty && modelForm.controls.remark.errors.required">*</span>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-cancel" (click)="cancel()">取消</button>
  <button class="btn btn-success" [disabled]="modelForm.invalid" (click)="save()">保存</button>
</div>